/* 每一个页面都需要去掉body默认的外边距 */
body {
  margin: 0px;
}

/* 第一个盒模型 */
.box01 {
  /* 
  边框，第一个参数是边框的宽度，第二个参数是边框的线形
  第三个参数是边框的颜色
  */
  border: 1px solid #ff0000;
  /* 
  内边距，表示本元素里面的元素要离开距离，不要紧贴
  四个参数分别是上右下左的值
  如果只给两个值表示上下和左右
  如果只给一个值表示所有方向都一样
  */
  padding: 1rem 2rem 3rem 4rem;
  /* 外边距，本元素和父元素分开距离，
  参数数量和语义都和内边距一样 */
  margin: 1rem 2rem;
}

/* class的优点，公用 */
.bbox {
  border: 2px dotted #0000ff;
  /* 
    元素宽度，div这种块元素才能正确理解盒模型的属性
    而块元素不论宽度是多少，都会占用满容器的宽度
  */
  width: 15rem;
  /* 高度 */
  height: 2rem;
}
/* 
rem单位是绝对单位，表示浏览器基础字体大小的倍数
如果基础字体大小是16px(默认值)
那么2rem就等同于32px，rem也可以是小数
*/
/* 
块元素(div,li,p,hn...)和行内元素(span,i,u)的区分
块元素的display默认是block，行内元素的display默认是inline
*/

/* css的层叠 */
.box02 {
  margin: 1rem;
  font-size: 1.5rem;

  /* 单独设置border边框宽度 */
  border-width: 5px;
  /* 
  如果多个class的样式，或者不同方式套用的样式冲突
  那么就会使用就近原则处理
  第一种情况是style属性，
    因为是写在元素上，最近，优先级最高
  第二种是套用的次序决定，后套用的生效
  */
}
